import $ from 'jquery'
(function () {
    $('.monitor .tabs').on('click', 'a', function () {
        $(this)
            .addClass('active')
            .siblings('a')
            .removeClass('active')

        $('.inner .content')
            .eq($(this).index())
            .show()
            .siblings('.content')
            .hide()
    })

    $('.marquee-view .marquee').each(function () {
        var copyMarquee = $(this).children().clone()
        $(this).append(copyMarquee)
    })
})();


(function () {
    var orders = [29832, 3456, 234, 21]
    var saleMoney = [9876, 345, 12, 3]
    $('.order .filter').on('click', 'a', function () {
        $(this).addClass('active').siblings().removeClass('active')
        index = $(this).index()
        $(this).parent().siblings('.data').find('.orderNum').text(orders[index])
        $(this).parent().siblings('.data').find('.saleMoney').text(saleMoney[index])
    })

    var orderTab = $('.order .filter a')
    var index = 0
    orderTab.timer = setInterval(function () {
        index++
        if (index > 4) index = 0
        orderTab.eq(index).click();
    }, 2000)

    $('.filter').hover(function () {
        clearInterval(orderTab.timer)
    }, function () {
        clearInterval(orderTab.timer)
        orderTab.timer = setInterval(function () {
            index++
            if (index > 4) index = 0
            orderTab.eq(index).click();
        }, 2000)

    })





})();

(function () {
    var myChart = echarts.init(document.querySelector('.panel .pie'))
    var option = {

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: [20, 90],
                center: ['50%', '50%'],
                roseType: 'radius',
                data: [
                    { value: 10, name: '济南' },
                    { value: 5, name: '四川' },
                    { value: 15, name: '北京' },
                    { value: 25, name: '上海' },
                    { value: 20, name: '杭州' },
                    { value: 35, name: '深圳' },
                    { value: 30, name: '西安' },
                    { value: 40, name: '重庆' }
                ],
                label: {
                    fontSize: 14
                },
                labelLine: {
                    length: 6,
                    length2: 8,
                }
            }
        ]
    };
    myChart.setOption(option)

    window.addEventListener('resize', function () {
        myChart.resize()
    })

})();


(function () {
    var myChart = echarts.init(document.querySelector('.users .bar'))
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }
    var option = {
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0,
            0,
            0,
            1,
            [
                { offset: 0, color: "#00fffb" }, // 0 起始颜色
                { offset: 1, color: "#0061ce" } // 1 结束颜色
            ]
        ),
        tooltip: {
            trigger: 'item',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            right: '3%',
            bottom: '3%',
            top: '3%',
            containLabel: true,
            show: true,
            borderGround: 'rgba(0, 240, 255, .3)'
        },
        xAxis: [
            {
                type: 'category',
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                axisTick: {
                    alignWithLabel: false,
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd',
                    interval: 0,
                    rotate: 45,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: '#4c9bfd'
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0,240,255,.4)'
                    }
                }
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [2100,
                    1900,
                    1700,
                    1560,
                    1400,
                    item,
                    item,
                    item,
                    900,
                    750,
                    600,
                    480,
                    240]
            }
        ]
    };

    myChart.setOption(option)

    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();

(function () {
    var myChart = echarts.init(document.querySelector('.sales .line'))
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }
    var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#4c9bfd',
            },
            right: '10%',
            // data: ['ye', '联盟广告']
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,
            borderColor: '#012f4a',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                color: '#4c9bfd',
            },
            axisLine: {
                show: false,
            },
        },

        yAxis: {
            type: 'value',
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#4c9bfd',
            },
            splitLine: {
                show: false,
                color: '#012f4a',
            },
            // axisLine: {
            //     show: false,
            // },
            boundaryGap: false,
        },
        series: [
            {
                name: '预期销售额',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            },
            {
                name: '实际销售额',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            },
        ]
    };

    myChart.setOption(option)

    $('.sales .caption').on('click', 'a', function () {
        $(this).addClass('active').siblings('a').removeClass('active')
        var current = data[this.dataset.type]
        index = $(this).index() - 1
        option.series[0].data = current[0]
        option.series[1].data = current[1]
        myChart.setOption(option)
    })

    var as = $('.sales .caption a')
    var index = 0
    as.timer = setInterval(function () {
        index++
        if (index > as.length) index = 0
        as.eq(index).click();
    }, 1000);

    $('.sales').hover(
        function () { clearInterval(as.timer) },
        function () {
            clearInterval(as.timer)
            as.timer = setInterval(function () {
                index++
                if (index > as.length) index = 0
                as.eq(index).click();
            }, 1000);

        }
    )
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();

(function () {
    var myChart = echarts.init(document.querySelector('.channel .radar'))

    var option = {
        radar: {
            center: ['50%', '50%'],
            indicator: [
                { name: '机场', max: 100 },
                { name: '商场', max: 100 },
                { name: '火车站', max: 100 },
                { name: '汽车站', max: 100 },
                { name: '地铁', max: 100 }
            ],
            radius: '65%',
            shape: "circle",
            splitNumber: 4,
            name: {
                textStyle: {
                    color: "#4c9cfd"
                }
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(238, 197, 102, 0.1)",

                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)"
                }
            }
        },
        tooltip: {
            show: true,
            position: ['60%', '10%'],
        },
        series: [
            {
                name: "北京",
                type: "radar",
                label: {
                    show: true,
                    color: '#ffff',
                    fontSize: 10,
                },
                lineStyle: {
                    normal: {
                        color: '#fff',
                        width: 1,
                        opacity: 0.5
                    }
                },
                data: [[90, 19, 56, 11, 34]],
                symbol: "circle",
                symbolSize: 6,
                itemStyle: {
                    color: "#ffff"
                },
                areaStyle: {
                    color: 'rgba(238, 197, 102, 0.6)',
                }
            }
        ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();

(function () {
    var myChart = echarts.init(document.querySelector('.quarter .gauge'))
    var option = {
        series: [
            {
                type: 'pie',
                startAngle: 180,
                radius: ['130%', '150%'],
                center: ['48%', '80%'],
                label: {
                    normal: {
                        show: false,
                    }
                },
                hoveroffset: 0,
                hoverAnimation: false,
                data: [
                    {
                        value: 100, itemStyle: {
                            // 颜色渐变#00c9e0->#005fc1
                            color: new echarts.graphic.LinearGradient(
                                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                                    { offset: 1, color: "#005fc1" } // 1 结束颜色
                                ]
                            )
                        }
                    },
                    { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d },
                    { value: 200, itemStyle: { color: 'transparent' } },
                ]
            }
        ]
    };

    myChart.setOption(option)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();

(function () {
    var hotData = [
        {
            city: '北京',  // 城市
            sales: '25, 179',  // 销售额
            flag: true, //  上升还是下降
            brands: [   //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ]
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ]
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ]
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ]
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ]
        }
    ];

    var supHtml = ''
    $.each(hotData, function (index, element) {
        supHtml += `<li>
                        <span>${element.city}</span>
                        <span>${element.sales} <s class=${element.flag ? "icon-up" : "icon-down"}></s></span>
                    </li>`
    })
    $('.province .sup').html(supHtml)
    $('.province .sup').on('mouseenter', 'li', function () {
        random($(this).index())
    })

    function random(index) {
        supLi.eq(index).addClass('active').siblings().removeClass('active')
        var current = hotData[index].brands
        var subHtml = ''
        time = index
        $.each(current, function (index, element) {
            subHtml += `<li>
                            <span>${element.name}</span><span>${element.num} <s class=${element.flag ? "icon-up" : "icon-down"} ></s></span>
                        </li>`
        })
        $('.province .sub').html(subHtml)
    }

    var time = 0
    var supLi = $('.province .sup li')
    random(time)

    supLi.timer = setInterval(function () {
        time++
        if (time % supLi.length == 0) time = 0
        random(time)
    }, 1000)


    $('.province .sup').hover(function (e) {
        clearInterval(supLi.timer)
        console.log('触发了');
    }, function () {
        clearInterval(supLi.timer)
        supLi.timer = setInterval(function () {
            time++
            if (time % supLi.length == 0) time = 0
            random(time)
        }, 1000)
    })

})();

